@charset "utf-8";

@import "reset";

.web {
    margin: 0 auto;
    background-color: #F8F8F8;
    overflow: hidden;

    // 头部区域
    header {
        position: fixed;
        height: 50px;
        top: 0;
        z-index: 1;
        width: 100vw;
        background-color: #fff;

        .shopping-title {
            width: 100vw;
            height: 13.8667vw;
            border-bottom: .2667vw solid #E3E3E3;

            .shopping-title-img {
                display: inline-block;
                width: 3.4667vw;
                height: 5.3333vw;
                margin-top: 3.7333vw;
                margin-left: 4vw;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .shopping-title-content {
                margin-left: 33%;
                display: inline-block;
                width: 12.8vw;
                height: 5.8667vw;

                span {
                    color: #555555ff;
                    font-size: 4.2667vw;
                    text-align: center;
                }
            }
        }
    }

    // 空白区域
    .unnecessary {
        width: 100vw;
        height: 13.8667vw;
    }

    // 主体区域
    main {
        background-color: #dfdddd;

        // 容器 购物车界面
        .container {
            width: 100vw;
            height: 136.8vw;
            background-color: #fff;

            .item-one, .item-two, .item-three {
                display: flex;
                width: 100vw;
                height: 45.6vw;
                border-bottom: .2667vw solid #E3E3E3;

                .checkbox {
                    width: 3.4667vw;
                    height: 3.4667vw;
                    border: 0.2667vw solid #767676;
                    border-radius: 1.3333vw;
                    margin-top: 22.2667vw;
                    margin-left: 2.6667vw;
                }

                img {
                    width: 35.4133vw;
                    height: 35.4133vw;
                    margin-top: 4vw;
                    margin-left: 2.6667vw;
                }

                .desc {
                    margin-left: 2.6667vw;
                    margin-top: 13.7573vw;
                    line-height: 5.3333vw;

                    h2 {
                        color: #333333ff;
                        font-size: 16px;
                        line-height: 9.3333vw;
                    }

                    h3 {
                        color: #555555ff;
                        font-size: 14px;

                        .old-price {
                            color: #A6A6A6;
                            text-decoration: line-through;
                        }

                        .new-price {
                            color: #E63532;
                        }
                    }
                }
            }
        }

        // 主体区域-猜你喜欢
        .like {
            width: 100vw;
            background-color: #F8F8F8;
            margin-bottom: 13.6vw;

            .like-title {
                width: 100vw;
                height: 14.6667vw;
                margin-top: 2.1333vw;

                h2 {
                    margin-left: 4vw;
                    color: #555555ff;
                    font-size: 17.5px;
                    line-height: 14.6667vw;
                }
            }

            .like-content {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;

                .flower {
                    width: 44vw;
                    height: 62.6667vw;
                    margin-bottom: 2.6667vw;
                    background-color: #fff;

                    img {
                        width: 44vw;
                        height: 44vw;
                    }

                    h3 {
                        margin-top: 5.0667vw;
                        margin-left: 2.6667vw;
                        color: #333333ff;
                        font-size: 14px;
                    }

                    .flower-price {
                        margin-top: 1.3333vw;

                        span {
                            margin-left: 1.3333vw;
                            color: #ff734cff;
                            font-size: 14px;
                        }

                        .sell {
                            margin-left: 11.7333vw;
                            color: #999999ff;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    // 空白区域
    .unnecessary-two {
        width: 100vw;
        height: 13.3333vw;
    }

    // 底部区域-结算界面
    .tabbar {
        display: inline-block;
        position: fixed;
        bottom: 0;
        margin-top: 13.6vw;
        width: 100vw;
        height: 13.3333vw;
        background: linear-gradient(to right, #fff 70%, #884E22 30%);
        font-size: 0;

        .amount {
            display: inline-block;
            width: 70%;
            color: #884E22;
            font-size: 3.7333vw;

            span {
                margin-left: 8vw;
            }
        }

        .settle {
            display: inline-block;
            width: 30%;
            color: white;
            text-align: center;
            font-size: 3.7333vw;
        }

        .settle::after {
            content: '';
            line-height: 13.3333vw;
        }
    }
}
